font-display 控制字体加载和替换

Flash of Invisible Text FOIT

浏览器经常会出现一些出乎我们意料的问题，而字体的加载就是其中之一。大多数浏览器在自定义字体还未下载之前会先隐藏文本, 这就是 FOIT

Web-fonts 时期

• 阻塞期： 字体未加载完成，此时字体为空白，对用户不可见
• 交换期： 字体加载未完成，此时字体展示后备字体，而不是空白
• 失败期： 字体价值失败，展示后备字体

font-display

• swap: 基本上没有阻塞期，直接进入交换期，使用后备字体渲染文本，等用到的字体加载完成之后替换掉后备字体。

• block: 阻塞期 3 秒，3 秒内若仍然没有加载完字体，直接进入交换期，显示后备字体而非空白，等字体下载完毕之后直接替换。

• auto: 这个是 font-display 的默认值，字体的加载过程由浏览器自行决定，不过基本上和取值为 block 时的处理方式一致。

• fallback: 阻塞期短 100ms, 然后交换期也有时限（大约 3 秒）3 秒内成功加载字体则使用，若没有则使用备用字体。 后背

• optional: 阻塞期短 100ms, 没有交换器，如果在阻塞期的 100 毫秒内字体加载完成，那么会使用该字体，否则直接使用后备字体。适用网络不好的时候直接舍弃 自选

@font-face {
  font-family: "Arvo";
  font-display: swap;
  src: local("Arvo"),
    url(https://fonts.jartto.wang/fonts/temp.woff2) format("woff2");
}

不支持 IE

参考

https://www.cnblogs.com/cangqinglang/p/14692891.html